<template>
  <div>
    <el-card body-style="padding: 0">
      <el-form
        ref="commonlyUsedQueryForm"
        :model="commonlyUsedQueryForm"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="地址名称" prop="webName">
              <el-input
                v-model="commonlyUsedQueryForm.webName"
                placeholder="请输入地址名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地址描述" prop="webDesc">
              <el-input
                v-model="commonlyUsedQueryForm.webDesc"
                placeholder="请输入地址描述"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-form-item>
              <el-button
                type="primary"
                size="small"
                @click="submitQueryForm()"
                icon="el-icon-search"
              >
                查询</el-button
              >
              <el-button
                type="primary"
                size="small"
                plain
                @click="resetQueryForm()"
                icon="el-icon-refresh"
              >
                重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card>
      <el-button
        type="primary"
        size="small"
        style="margin: 0 0 10px 20px"
        icon="el-icon-plus"
        @click="handleAdd('新增地址')"
        >新增</el-button
      >
      <el-table
        :data="tableData"
        border
        default-expand-all
        stripe
        style="width: 100%; margin-bottom: 20px"
      >
        <el-table-column
          prop="webName"
          label="地址名称"
          width="200"
          align="center"
        />
        <el-table-column prop="webUrl" label="地址" width="500" align="center">
          <template slot-scope="scope">
            <a :href="scope.row.webUrl" target="_blank">
              {{ scope.row.webUrl }}
            </a>
          </template>
        </el-table-column>
        <el-table-column
          prop="webDesc"
          label="地址描述"
          width=""
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" width="90" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="handleEdit(scope.$index, scope.row, '修改地址')"
            />
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[20, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pagination.pageNum"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
        background
        style="float: right; margin-bottom: 10px"
      >
      </el-pagination>
    </el-card>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      :before-close="beforeDialogClose"
    >
      <el-form
        :model="dialogForm"
        ref="dialogForm"
        :rules="dialogFormRules"
        label-width="20%"
      >
        <el-row :gutter="20">
          <el-form-item label="地址名称" prop="webName">
            <el-input
              v-model="dialogForm.webName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item label="地址" prop="webUrl">
            <el-input v-model="dialogForm.webUrl" autocomplete="off"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item label="地址描述" prop="webDesc">
            <el-input
              v-model="dialogForm.webDesc"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submitDialogForm()" size="mini" type="primary"
          >确 定</el-button
        >
        <el-button @click="handleCloseDialog" size="mini">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addCommonlyUsed,
  updateCommonlyUsed,
  deleteCommonlyUsed,
  getCommonlyUseds,
} from "../../api/communicate/commonlyused.js";
import axios from "axios";
import MixinCUD from "@/components/MixinCUD";

export default {
  name: "CommonlyUsed",
  mixins: [MixinCUD],
  data() {
    return {
      tableData: [],
      queryFormRefName: "commonlyUsedQueryForm",
      commonlyUsedQueryForm: {
        webUrl: "",
        webName: "",
        webDesc: "",
        id: null,
      },
      pagination: {
        pageNum: 1,
        pageSize: 20,
        total: null,
      },
      dialogTitle: "",
      dialogFormVisible: false,
      dialogTitle: "",
      dialogRefName: "dialogForm",
      dialogForm: {
        id: null,
        webUrl: "",
        webName: "",
        webName: "",
      },
      dialogFormRules: {
        webUrl: [
          { required: true, message: "请输入地址", trigger: "blur" },
          {
            pattern: /^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i,
            message: "url地址不合法",
            trigger: "blur",
          },
        ],
        webName: [
          { required: true, message: "请输入地址名称", trigger: "blur" },
        ],
        webDesc: [
          { required: true, message: "请输入地址描述", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    updateData() {
      updateCommonlyUsed(this.dialogForm).then((res) => {
        this.$message({ message: res.data, type: "success" });
        this.submitQueryForm(); //修改之后，重新查询table
        this.handleCloseDialog();
      });
    },
    addData() {
      addCommonlyUsed(this.dialogForm).then((res) => {
        this.$message({ message: res.data, type: "success" });
        this.submitQueryForm(); //新增之后，重新查询table
        this.handleCloseDialog();
      });
    },
    deleteData(row) {
      this.$confirm("确定删除地址:[" + row.webName + "]?").then((_) => {
        deleteCommonlyUsed(row.id)
          .then((res) => {
            this.submitQueryForm(); //删除之后，重新查询table
            this.$message({ message: res.data, type: "success" });
          })
          .catch((err) => {
            this.$message({ message: err.message, type: "error" });
          });
      });
    },
    getData() {
      getCommonlyUseds(this.commonlyUsedQueryForm, this.pagination).then(
        (res) => {
          this.setData(res);
        }
      );
    },
    setData(pageinfo) {
      if (pageinfo.isok) {
        this.tableData = pageinfo.data.records;
        this.pagination.pageSize = pageinfo.data.size;
        this.pagination.total = pageinfo.data.total;
      }
    },
    handlePageSizeChange(val) {
      this.pagination.pageSize = val;
      this.submitQueryForm();
    },
    handlePageNumChange(val) {
      this.pagination.pageNum = val;
      this.submitQueryForm();
    },
  },
  beforeRouteEnter(to, from, next) {
    axios
      .all([
        getCommonlyUseds(
          { webUrl: "", webName: "", webDesc: "", id: null },
          { pageNum: 1, pageSize: 20 }
        ),
      ])
      .then(
        axios.spread(function(res1) {
          next((vm) => {
            vm.setData(res1);
          });
        })
      );
  },
};
</script>

<style scoped>
.db-document-frame {
  margin-top: 40px;
  background-color: transparent;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}
.el-form {
  margin-top: 20px;
}
</style>
